import { ref, watch, onMounted } from 'vue'

export default function useTodos() {
  const todos = ref([])

  const getTodos = () => {
    const todoLists = JSON.parse(localStorage.getItem('todoLists')) || []
    todos.value = todoLists
  }

  const handleAddTodo = (todo) => {
    todos.value.push(todo)
  }
  const handleToggleTodo = (id, value) => {
    // 1. 根据id找到对应的todo对象
    const todo = todos.value.find((item) => item.id === id)
    // 2. 修改done属性的值
    todo.done = value
  }
  const handleEditTodo = (id, value) => {
    const todo = todos.value.find((item) => item.id === id)
    todo.content = value
  }
  const handleToggleAll = (value) => {
    todos.value.forEach((todo) => {
      todo.done = value
    })
  }
  const handleDeleteTodo = (id) => {
    // 1. 根据id找到对应的todo对象的索引
    const index = todos.value.findIndex((item) => item.id === id)
    // 2. 根据索引删除todo对象
    todos.value.splice(index, 1)
  }

  const handleClearDone = () => {
    todos.value = todos.value.filter((todo) => !todo.done)
  }
  const handleClearAll = () => {
    todos.value = []
  }
  watch(
    todos,
    () => {
      localStorage.setItem('todoLists', JSON.stringify(todos.value))
    },
    { deep: true }
  )
  onMounted(() => {
    getTodos()
  })

  return {
    todos,
    getTodos,
    handleAddTodo,
    handleToggleTodo,
    handleEditTodo,
    handleToggleAll,
    handleDeleteTodo,
    handleClearDone,
    handleClearAll,
  }
}
